<template>

  <div class="listperson">
    <h4>人员列表</h4>
     
    <table class="tt"  border="1" cellpadding="0" cellspacing="0" >
        <thead>
        <tr>
            <th class="tt1">序号</th>
            <th class="tt1">姓名</th>
            <th class="tt2">性别</th>
            <th class="tt3">年龄</th>
            <th class="tt4">职务</th>
            <th class="tt5">薪资</th>
            <th class="tt6">入职时间</th>
            <th class="tt6">操作1</th>
            <th class="tt6">操作2</th>
        </tr>
       
        </thead>
        <tbody  v-for="(item,index) in SelectVuex" :key="index">
        <tr>
            <td align="center">{{index+1}}</td>
            <td align="center">{{item.na}}</td>
            <td align="center">{{item.newGender}}</td>
            <td align="center">{{item.nl}}</td>
            <td align="center">{{item.newPort}}</td>
            <td align="center">{{item.xz}}</td>
            <td align="center">{{item.ti}}</td>              
            <td align="center"><button @click="del(index)" class="b1">删除</button></td> 
            <td align="center"><button class="b1" @click="goEdit(index)">编辑</button></td>                                             
        </tr>
       
              
  </tbody>
      </table>
            <td align="center"><button class="b1">批量删除</button></td>     

  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import data from "../assets/JS/data.js";

export default {
name:"ListPerson",

//计算属性内部的函数是自动执行且可以作为数据循环
  computed:{
    //获取vuex的state内部的数据
    ...mapState(['plist']),
    //如果不用快捷方法：this.$store.state.plist

    //对数据进行加工
    SelectVuex(){
        //备份
        let plist = this.plist;
        //遍历，数据加工
        for(let item of plist){
            item.newGender = item.gender==0?'女':'男';
            //一个变量多种可能
            switch(item.port){
                case 1 : item.newPort ='老板';break;
                case 2 : item.newPort ='总经理';break;
                case 3 : item.newPort ='部门主管';break;
                case 4 : item.newPort ='组长';break;
                case 5 : item.newPort ='员工';break;

            }
            
        }
        return plist;
    }
  },
 data(){
    return{
   data,
    }
 },
 methods:{
    ...mapMutations(['dellist']),
    //删除函数
    del(index){
        this.dellist(index)
    },
    goEdit(index){
        console.log(index);
        
        this.$router.push('/home/edit?i='+index)
    }
    
   
 }
}
</script>

<style scoped>
.table{
      margin: auto;
}
.tt{
    margin-top: 20px;
  
}
.tt tr{
    height: 70px;
}
.tt .tt1{
    width: 100px;
  
}
.tt .tt2{
    width: 100px;
}
.tt .tt3{
    width: 100px;
}
.tt .tt4{
    width: 100px;
  
}
.tt .tt5{
    width: 100px;
}
.tt .tt6{
    width: 100px;
}
.tt p{
  height: 100px;
  width: 200px;
}
.tt input{
    color: blue;
    border: none;
    background-color: white;
}
.tt input:hover{
     cursor: pointer;
  
}
.b1{
  height: 30px;
  width: 60px;
  color: white;
  background-color: rgb(247, 165, 178);
  border: none;
  border-radius: 5px;
}

</style>